<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/resources/css/common.css}" rel="stylesheet" tyle="text/css"/>
    <link th:href="@{/resources/css/style.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/resources/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/resources/js/bootstrap.min.js}"></script>
    <title>用户注册</title>
</head>


<body>
<!--顶部样式-->
<div class="common_top">
    <div class="Narrow">
        <div class=" left logo"><img th:src="@{/resources/images/logo.png}"/></div>
        <!--可修改图层-->
        <div class=" left festival"><img th:src="@{/resources/images/logo_yd.png}"/></div>
        <!--电话图层-->
        <div class="phone">全国服务热线：<em>400-123456</em></div>
    </div>
</div>
<div class="rgister Narrow">
    <div class="Sign">
        <div class="AD_img"><img th:src="@{/resources/images/adbg_03.png}"/></div>
        <div class="rgister-form">
            <div class="rgister-name"><span class="name">用户注册</span> <span class="English">REGISTER</span></div>
            <form id="form1" name="form1" method="post" th:action="@{/user/addUser}">
                <div class="form clearfix">
                    <div class="item"><label class="rgister-label">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</label>
                        <input id="phonenum" name="phone" maxlength="11" type="number" class="text" placeholder="请输入手机号" required/><b id="phonenumalert">*</b>
                    </div>
                    <div class="item"><label class="rgister-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <input id="password" name="password" type="password" class="text" placeholder="请输入密码" required/><b id="pwdalert">*</b>
                    </div>
                    <!--<div class="Password_qd"><ul><li class="r">弱</li><li class="z">中</li><li class="q">强</li></ul></div>-->
                    <div class="item"><label class="rgister-label ">确认密码：</label>
                        <input id="password1" name="password1" type="password" class="text" placeholder="请输入密码" required/>
                    </div>
                    <div class="item"><label class="rgister-label">电子邮箱：</label>
                        <input id="email" name="email" type="text" class="text" placeholder="请输入邮箱" required/><b id="emailalert">*</b></div>
                    <div class="item ">
                        <label class="rgister-label ">验&nbsp;证&nbsp;码：</label>
                        <input id="code" type="text" style="float:left;" class="Recommend_text"  placeholder="请输入验证码" required/>
                        <img th:src="@{/captcha/getcode}" style="float:left; padding-left: 10px;" id="captchaImage" th-alt="验证码，点击图片更换" onclick="changeCode()"/><b id="yzalert">*</b>
                    </div>
                </div>
                <div class="rgister-btn">
                    <button id="submit" type="submit" class="btn_rgister">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
                </div>
                <div class="Note"><span class="login_link">已是会员<a th:href="@{/toLogin}">请登录</a></span></div>
            </form>
        </div>
    </div>
</div>
<!--底部样式-->
<div class="bottom_footer">
    <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">法律申明</a> | <a href="#">友情链接</a>
    </p>
</div>

<script>
    /*
    *获取图片验证码
     */
    function changeCode() {
        var path = "[[@{/captcha/getcode}]]";
        var requestPath = path +"?t="+ new Date().getTime();
        document.getElementById("captchaImage").setAttribute("src",requestPath);
    }


    /*
    *判断手机号码格式是否正确
     */
    $("#phonenum").blur(function(){
        var phonenum = $("#phonenum").val();
        if(!(/^1[3456789]\d{9}$/.test(phonenum))){
            $("#phonenumalert").text("手机号有误");
            $("#submit").attr('disabled',true);
            return false;
        }else{
            $.ajax({
                url:"user/judgePhone?phoneNum="+$('#phonenum').val(),
                success (data) {
                    $("#phonenumalert").text("fdsafsd");
                    if (data.toString() == phonenum) {
                        $("#phonenumalert").text("用户名存在");
                        $("#submit").attr('disabled',false);
                    }else{
                        $("#phonenumalert").text("*");
                        $("#submit").attr('disabled',true);
                    }
                }
            });
            $("#phonenumalert").text("*");
            $("#submit").attr('disabled',false);
            return true;
        }
    });

    /*
    *判断邮箱格式是否正确
     */
    $("#email").blur(function(){
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
       // var obj = document.getElementById("idcard");
            var email = $("#email").val();
        if (email == "") {
            $("#emailalert").text("输入不能为空");
            return false;
        } else if (!reg.test(email)) {
            $("#emailalert").text("格式错误");
            $("#submit").attr('disabled',true);
            return false;
        } else {
            $("#emailalert").text("*");
            $("#submit").attr('disabled',false);
            return true;
        }
    });
    /*判断验证码是否正确
    *如果不正确不能点击注册按钮
     */
    $("#code").blur(function(){
        $.ajax({
            url:"captcha/judgecode?code="+$('#code').val(),
            success (data) {
                if (data.toString()=="true") {
                    $("#yzalert").text("*");
                    $("#submit").attr('disabled',false);
                }else{
                    $("#yzalert").text("验证码错误");
                    $("#submit").attr('disabled',true);
                }
            }
            });
    });
    /*判断两次密码是否一致
    *不一致alert 提示用户并且注册按钮不可点击
     * 一致 注册按钮可以点击
     */
    $("#password1").blur(function(){
        var password = $("#password").val();
        var password1 = $("#password1").val();
        if(password  != password1 ){
            $("#pwdalert").text("密码不一致");
            $("#submit").attr('disabled',true);
        }else{
            $("#pwdalert").text("*");
            $("#submit").attr('disabled',false);
        }
    });
</script>
</body>
</html>
